<template>
  <div class="content-box compensationInformation-box">
    <nav-title title="薪酬信息" :routerLink="routerLink"/>
    <div class="regulations-box">
      <div class="info-label">当前薪资明细</div>
      <div class="compensationInformation-interval"></div>
      <div class="compensationInformation-nowMoney">
        <div class="compensationInformation-nowMoney-label">
          <div class="label">薪酬描述</div>
          <div class="value">金额(元)</div>
        </div>
        <div class="compensationInformation-nowMoney-value" v-for="item in data.pycomps">
          <div class="label">{{item.name}}</div>
          <div class="value">{{item.value}}</div>
        </div>
      </div>
      <div class="compensationInformation-dividingLine"></div>
      <div class="compensationInformation-description">
        <div>
          <div class="label">薪资计划</div>
          <div class="value">{{data.descr1}}</div>
        </div>
        <div>
          <div class="label">薪等</div>
          <div class="value">{{data.descr2}}</div>
        </div>
        <div>
          <div class="label">薪级</div>
          <div class="value">{{data.descr3}}</div>
        </div>
        <div>
          <div class="label">发薪单位</div>
          <div class="value">{{data.descr4}}</div>
        </div>
        <div>
          <div class="label">成本中心</div>
          <div class="value">{{data.descr5}}</div>
        </div>
        <div>
          <div class="label">社保缴纳单位</div>
          <div class="value">{{data.descr6}}</div>
        </div>
        <div>
          <div class="label">公积金缴纳单位</div>
          <div class="value">{{data.descr7}}</div>
        </div>
      </div>
      <!-- <div class="info-label">历史调薪明细</div>
      <div class="compensationInformation-interval"></div>
      <div class="compensationInformation-table-box">
        <table class="compensationInformation-table">
          <thead>
            <tr>
              <th>生效日期</th>
              <th>原因</th>
              <th>月固薪（元）</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in data.pyMods">
              <td>{{item.effdt}}</td>
              <td>{{item.actionReason}}</td>
              <td>{{item.comprate}}</td>
            </tr>
          </tbody>
        </table>
      </div> -->
    </div>
  </div>
</template>

<script>
  import { getPyComp } from '../../api/api';
  // import { Datetime, Group, PopupRadio, dateFormat } from 'vux';
  import moment from 'moment';
  import cloneDeep from 'lodash/clonedeep';
  export default {
    name: 'Vacation',
    components: {
    },
    created() {
      this.eplid = this.$route.query.eplid;
      this.getData();
    },
    mounted() {},
    data() {
      return {
        type: false,
        eplid: '',
        routerLink: '',
        data: {
          // pycomps: [
          //   {name: '月固薪', value: '18000'},
          //   {name: '基本工资', value: '12313'},
          //   {name: '岗位工资', value: '122'},
          //   {name: '加班工资', value: '1432'},
          // ],
          // pyMods: [
          //   {
          //     effdt: '2015-01-01',
          //     actionReason: '社会招聘',
          //     comprate: '8000',
          //   }
          // ],
          // descr1: '控股薪资计划',
          // descr2: 'M',
          // descr3: '02',
          // descr4: '常州奥克斯房产开发有限公司',
          // descr5: '控股总部-人力资源中心',
          // descr6: '上海外服',
          // descr7: '上海外服',
        }
      }
    },
    methods: {
      getData() {
        getPyComp({emplid: this.eplid})
          .then((res)=>{
            console.debug(res);
            if (res && res.retCode === "000000") {
              this.data = res.retData;
            } else {
              this.$vux.alert.show({
                title: "提示",
                content: res.retMsg
              });
            }
          })
          .catch(res => {
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
      },
    }
  }
</script>

<style type="text/scss" lang="scss">
  @import "../../styles/staff.scss";
  .compensationInformation-box{
    .compensationInformation-table-box{
      padding: 10px;
      .compensationInformation-table{
        width: 100%;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        th{
          font-weight: bold;
          background-color: #f8f8f8;
        }
        th, td{
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          line-height: 40px;
        }
      }
    }

    .compensationInformation-nowMoney{
      padding: 10px;
      >div{
        height: 40px;
        line-height: 40px;
        display: flex;
        >div{
          text-align: center !important;
        }
        &.compensationInformation-nowMoney-label{
          border-top: 1px solid #ccc;
          border-left: 1px solid #ccc;
          background-color: #f8f8f8;
          font-weight: bolder;
        }
        &.compensationInformation-nowMoney-value{
          border-left: 1px solid #ccc;
          >.label{
            font-weight: lighter;
          }
        }
        .label{
          width: 40%;
          margin: 0;
        }
        .value{
          width: 60%;
        }
        .label, .value{
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
        }
      }
    }
    .compensationInformation-dividingLine{
      width: 100%;
      height: 4px;
      background: #eee;
    }
    .compensationInformation-interval{
      width: 90%;
      height: 1px;
      background-color: #ccc;
      margin: 0 auto;
    }
    .compensationInformation-description{
      padding: 10px;
      >div:first-child{
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
      }
      >div{
        border-left: 1px solid #ccc;
        display: flex;
        .label{
          width: 40%;
          margin: 0;
          background-color: #f8f8f8;
        }
        .value{
          width: 60%;
        }
        .label, .value{
          text-align: center !important;
          line-height: 40px;
          border-bottom: 1px solid #ccc;
          border-right: 1px solid #ccc;
        }
      }
    }
  }
</style>
